<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head">
    <p>{{ $route.meta.title }}</p>
  </div>

  <div class="ivu-card-body"><Table :columns="list.columns" :data="list.items" :loading="list.loading"></Table></div>

  <div class="ivu-card-body"><Page :current="pager.current" :total="pager.totalItems" :page-size="pager.limit" show-total @on-change="onChangePage"></Page></div>
</div>
</template>

<script>
import Vue from 'vue';
import { Table, Page, Poptip, Message } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import apiConfig from '@/utils/apiConfig';
import auth from '@/utils/auth';

Vue.component('Poptip', Poptip);

export default {
  components: {
    [Table.name]: Table,
    [Page.name]: Page
  },
  data() {
    return {
      apiConfig: {},
      token: auth.getToken(),
      list: {
        columns: [
          {title: 'ID', key: 'trade_sell_id', align: 'center'},
          {title: '订单号', key: 'create_time', align: 'center'},
          {title: '用户名', key: 'account', align: 'center'},
          {title: '数量', key: 'amount', align: 'center'},
          {title: '原数量', key: 'original_amount', align: 'center'},
          {title: '创建时间', key: 'create_time', align: 'center', render: (h, params) => { return h('span', new Date(parseInt(params.row.create_time) * 1000).toLocaleString()); }},
          {title: '状态', key: 'status', align: 'center', render: (h, params) => { return h('span', this.apiConfig['trade_sell_status'][params.row.status]); }},
          {title: '操作', key: 'action', align: 'center', render: (h, params) => {
            var _this = this;
            switch(params.row.status) {
              case 0:
              case '0':
                return h('div',[
                  h('a', {
                    class: 'ivu-btn ivu-btn-primary ivu-btn-small',
                    on: {
                      click() {
                        _this.$router.push({name: 'tradeSellMatch', params: {'id': params.row.trade_sell_id}});
                      }
                    }
                  }, '匹配'),
									h('Poptip', {
										props: {
												confirm: true,
												title: '确认取消?',
												transfer: true
										},
										on: {
											"on-ok": () => {
												var _this = this;
												ajaxiView.put('/backstage/trade/sell/'+params.row.trade_sell_id+'/cancal0?token='+this.token, '').then(function(data) {
													if(data !== false) {
														Message.success({
															content: data.msg,
															onClose: function() {
																_this.onChangePage(1);
															}
														});
													}
												});
											}
										}
									}, [
										h('a', {
											class: 'ivu-btn ivu-btn-error ivu-btn-small',
										}, '取消')
									])
                ]);
              case 2:
              case '2':
                return h('Poptip', {
                  props: {
                      confirm: true,
                      title: '确认取消?',
                      transfer: true
                  },
                  on: {
                    "on-ok": () => {
                      var _this = this;
                      ajaxiView.put('/backstage/trade/sell/'+params.row.trade_sell_id+'/cancal?token='+this.token, '').then(function(data) {
                        if(data !== false) {
                          Message.success({
                            content: data.msg,
                            onClose: function() {
                              _this.onChangePage(1);
                            }
                          });
                        }
                      });
                    }
                  }
                }, [
                  h('a', {
                    class: 'ivu-btn ivu-btn-error ivu-btn-small',
                  }, '取消')
                ]);
                break;
            }
          }}
        ],
        loading: false,
        items: []
      },
      pager: {
        current: 1,
        limit: 10,
        totalItems: 0
      }
    };
  },
  methods: {
    _initialize() {
      var _this = this;
      apiConfig.getItem().then(function(api_config) {
        _this.apiConfig = api_config;
        _this.getData();
      });
    },
    getData() {
      let _this = this;
      _this.list.loading = true;
      ajaxiView.get('/backstage/trade/sell?token='+_this.token+'&page='+_this.pager.current).then(function(data) {
        if(data !== false && typeof(data.pager) != 'undefined') {
          _this.list.items = data.pager.items;
          _this.pager.limit = data.pager.limit;
          _this.pager.totalItems = data.pager.total_items;

          _this.list.loading = false;
        }
      });
    },
    onChangePage(current) {
      this.pager.current = current;
      this.getData();
    }
  },
  mounted() {
    this._initialize();
  }
}
</script>
<style>
.ivu-table-cell .ivu-btn.ivu-btn-small {
  margin-right: 5px;
}
</style>